<template>
  <div class="resource-area">
    <h2>资源推荐</h2>
    <a-row :gutter="16">
      <a-col :xs="24" :sm="8">
        <a-card :bordered="false">
          <div slot="cover" />
          <a-card-meta title="慕课网">
            <template slot="description"
              ><a href="https://www.imooc.com/" target="view_window"
                >https://www.imooc.com/</a
              ></template
            >
          </a-card-meta>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="8">
        <a-card :bordered="false">
          <div slot="cover"></div>
          <a-card-meta title="哔哩哔哩">
            <template slot="description"
              ><a href="https://www.bilibili.com/" target="view_window"
                >https://www.bilibili.com/</a
              ></template
            >
          </a-card-meta>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="8">
        <a-card :bordered="false">
          <div slot="cover"></div>
          <a-card-meta title="ES6教程">
            <template slot="description"
              ><a href="https://es6.ruanyifeng.com/" target="view_window"
                >https://es6.ruanyifeng.com/</a
              ></template
            >
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.resource-area {
  background-color: #ececec;
  padding: 20px;
  h2 {
    text-align: center;
  }
  /deep/ .ant-col {
    &:nth-child(1) {
      .ant-card-cover {
        background-image: url("/images/imooc.png");
      }
    }
    &:nth-child(2) {
      .ant-card-cover {
        background-image: url("/images/bilibili.png");
      }
    }
    &:nth-child(3) {
      .ant-card-cover {
        background-image: url("/images/es6.jpg");
      }
    }
  }
  /deep/ .ant-card-cover {
    height: 120px;
    padding: 10px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  /deep/ .ant-card {
    height: 200px;
  }
}
</style>